<template>
  <el-dialog
    v-model="dialogVisible"
    title="设置功能区域"
    :append-to-body="true"
    :width="600"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <super-form
      :formAndTable="false"
      ref="formRef"
      v-bind="formOption"
      :modelValue="formData"
      :rules="formRules"
      :disabled="props.disabled"
    />

    <template #footer v-if="props.disabled === false">
      <div class="dialog-footer">
        <el-button @click="showDialog(false)"> 取 消 </el-button>
        <el-button type="primary" :loading="loading" @click.stop="handleSubmit"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="dialogArea">
import { ref, onMounted } from "vue";
import { FormArea } from "./formConfig";
import { updateArea } from "@/utils/antvx6/nodeAndEdgeUpdate";
import { cloneDeep } from "lodash-es";
import { filterKey } from "@/utils/index";
const props = withDefaults(
  defineProps<{
    disabled: boolean;
  }>(),
  {}
);

onMounted(() => {});
const dialogVisible = ref<boolean>(false);
const loading = ref<boolean>(false);
const formRef = ref<any>();

const formOption = ref({});
const formData = ref<any>(new FormArea().formData);
const formRules = ref({});

// 表单提交
const handleSubmit = (): void => {
  formRef.value.ruleFormRef.validate((valid: any) => {
    if (valid) {
      const callback = () => {
        loading.value = false;
        showDialog(false);
        ElMessage.success("操作成功");
      };
      const _row = filterKey(cloneDeep(formData.value));
      updateArea(_row).then((res) => callback());
    }
  });
};

const showDialog = (isShow: boolean, data: any = {}) => {
  loading.value = false;
  if (isShow) {
    const formArea = new FormArea();
    formOption.value = formArea.formOption;
    Object.assign(formData.value, formArea.formData, data);
    dialogVisible.value = isShow;
  } else {
    formRef.value.ruleFormRef.resetFields();
    dialogVisible.value = isShow;
  }
};

defineExpose({
  showDialog,
});
</script>
<style scoped lang="scss"></style>
